<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>优惠券</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
    <div id="coupon" class="coupon">
        <header class="relative">
            <img src="../../image/back_icon.png" class="back_icon absolute"  style="top:25px;left:2%;" tapmode onclick="closeWin();"/>
        </header>
        <!--砸蛋页面-->
        <h2 style="padding-left:2%;">优惠券</h2>
        <div class="coupon-box">
            <div v-if="redPacketList.length > 0">
                <div class="usable-coupon">
                  <!--每个优惠券-->
                  <div class="list" v-for="(usable,idx) in redPacketList" v-if="usable.is_useful == 1" @click="selectRedPacket(usable)">
                      <div class="item1"><span class="icon">￥</span><span class="money"  v-text="usable.price"></span></div>
                      <div class="item2">
                          <p class="text" v-text="usable.game_title"></p>
                          <h3 v-text="'【满'+usable.limit_price+'元可用】'"></h3>
                          <p class="time"><span>{{usable.begin_time | time("yy/MM/dd hh:mm",usable.begin_time)}}</span> - <span>{{usable.end_time | time("yy/MM/dd hh:mm",usable.end_time)}}</span></p>
                      </div>
                  </div>
              </div>
              <div class="unusable-coupon" v-if="unusableNumber>0">
                  <h4 style="margin-left:2%;">不可使用优惠券</h4>
                  <div class="list" v-for="(unusable,idx) in redPacketList" v-if="unusable.is_useful == 0" >
                      <div class="item1"><span class="icon">￥</span><span class="money" v-text="unusable.price"></span></div>
                      <div class="item2">
                          <p class="text" v-text="unusable.game_title"></p>
                          <h3 v-text="'【满'+unusable.limit_price+'元可用】'"></h3>
                          <p class="time"><span>{{unusable.begin_time | time("yy/MM/dd hh:mm",unusable.begin_time)}}</span> - <span>{{unusable.end_time | time("yy/MM/dd hh:mm",unusable.end_time)}}</span></p>
                      </div>
                  </div>               
              </div>
              <p class="info" v-if="unusableNumber>0">本单尚未达到使用条件</p>
            </div>
            <div v-if="redPacketList.length == 0">
              <div class="flex" >
                <img src="../../image/no-data.png" alt="点击屏幕，重新加载~" class="no-data"/>
              </div>
              <div class="default-text center">没有优惠券~</div>
            </div>
        </div>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {
    //smartupdatefinish();
    var vm = new Vue({
        el: '#coupon',
        data: {
            unusableNumber:0,
            usableNumber:0,
            redPacketList:[],
            adderId:'',
            times:0,
            /*redPacketList:[{
              is_useful:0,
              game_title:'哈哈哈哈',
              limit_price:100,
              price:1,
              begin_time:1534750879,
              end_time:1535182879,
              id:12
            },{
              is_useful:1,
              game_title:'哈哈哈哈',
              limit_price:100,
              price:1,
              id:144,
              begin_time:1534750879,
              end_time:1535182879
            }],*/
        },
        mounted:function(){
            this.adderId = api.pageParam.adderId;
            this.times = api.pageParam.times;
            this.getCoupon();
        },
        filters:{
            time:function function_name(value,format) {
              if(value){
                 if(value.toString().length == 10){
                      value = value*1000
                  }
                  var dateObj = new Date(value);
                    var date = {
                          "Y+": dateObj.getYear(),
                          "M+": dateObj.getMonth() + 1,
                          "d+": dateObj.getDate(),
                          "h+": dateObj.getHours(),
                          "m+": dateObj.getMinutes(),
                          "s+": dateObj.getSeconds(),
                          "q+": Math.floor((dateObj.getMonth() + 3) / 3),
                          "S+": dateObj.getMilliseconds()
                    };
                    if (/(y+)/i.test(format)) {
                        format = format.replace(RegExp.$1, (dateObj.getFullYear() + '').substr(4 - RegExp.$1.length));
                    }
                    for (var k in date) {
                        if (new RegExp("(" + k + ")").test(format)) {
                            format = format.replace(RegExp.$1, RegExp.$1.length == 1? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
                        }
                   }
                   return format;
              }
            }
        },
        methods:{
            getCoupon:function(){
                var _this = this;
                let url = "";
                if(this.adderId){
                    url = "api/adder/"+this.adderId+"/order/packet?num="+this.times;
                }else{
                    url = "api/adder/redpacket";
                }
                ajaxRequest({
                    url:url,
                    callback:function(res){
                        _this.redPacketList = res.data;
                        var unusableNumber,usableNumber = 0;
                        if(res.data.length>0){
                            res.data.map(function(item,index){
                                //不可用
                                if(item.is_useful == 0){
                                    unusableNumber+=1;
                                    console.log(unusableNumber);
                                }
                                //可用
                                if(item.is_useful == 1){
                                    usableNumber+=1;
                                }
                            })
                        }
                        _this.unusableNumber = unusableNumber;
                        _this.usableNumber = usableNumber;

                        if(usableNumber==0){
                          //没有数据时情调存储避免选了有优惠券的技能又切换没有技能进优惠券返回会显示之前的优惠券问题
                         $api.clearStorage("coupon");
                        }
                    }
                })
            },
            //选择优惠券后把对象存起来并关闭当前页面
            selectRedPacket:function(data){
              //从下单出进入才能选择
              if(this.adderId){
                 $api.setStorage('coupon',JSON.stringify(data));
                 closeWin();
              }
            }
        }
    });
};
</script>

</html>
